<template>
  <div v-loading="loading" class="main">
    <el-dialog
      :visible="showCRMExport"
      :title="$t('components.WkExport.20f1c789420cda49fe9d8d5b7bf983b5')+exportTypeName"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="750px"
      @close="closeView">
      <div class="dialog-body">
        <el-steps :active="stepsActive" align-center>
          <el-step
            :title="$t('components.WkExport.f5cfd1309be6727e82442929db05451a')" />
          <el-step
            :title="$t('components.WkExport.f58dfeee1bb0382f27c579ef19191813')" />
        </el-steps>
        <div
          v-if="stepsActive==1 && !exportLoading"
          class="step-section">
          <div v-if="config.rangeSelectShow" class="type-section">
            <div class="type-section__header">选择字段导出范围</div>
            <el-select
              v-model="rangeType"
              class="type-section__body"
              style="width: 100%;"
              @change="getFieldList">
              <el-option
                v-for="item in rangeTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </div>
          <flexbox
            direction="column"
            align="stretch"
            class="field">
            <div class="title">{{ $t('components.WkExport.54e90b2a4836baec9f76f63573ea2a06') }}</div>
            <div class="field-list">
              <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange">
                {{ $t('components.WkExport.ade6299a517a293c6d73f97381130a0e') }}
              </el-checkbox>
              <el-checkbox-group v-model="selectionList" @change="handleChange">
                <el-checkbox
                  v-for="(item,index) in fieldList"
                  :key="index"
                  :label="item.sortId">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="select-num">
              {{ $t('components.WkExport.192ca19a2022a1179fbbe7ea6209cd70',{1: selectionList.length }) }}
            </div>
          </flexbox>
          <div v-if="exportType != 'examine'" class="type-section">
            <div class="type-section__header">{{ $t('components.WkExport.38b4655ea604a5d822d1301ea4d5baaa') }}</div>
            <el-radio-group v-model="fileType">
              <el-radio :label="1">xls</el-radio>
              <el-radio :label="2">csv</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div
          v-if="exportLoading"
          v-loading="exportLoading"
          :element-loading-text="$t('components.WkExport.704e97c62ad0dad196139e6df9bb15d8')"
          element-loading-spinner="el-icon-loading"
          class="step-section" />

        <div
          v-if="stepsActive==2"
          class="step-section is-success">
          <div class="success">
            <img src="@/assets/img/success.png">
            <div>{{ doneTips }}</div>
          </div>
        </div>
      </div>
      <div v-if="!exportLoading" slot="footer" class="dialog-footer">
        <el-button v-if="stepsActive==1" type="primary" @click="sureClick">
          {{ $t('components.WkExport.8543800be9002349c12e503e7a54d970') }}
        </el-button>
        <el-button v-else type="primary" @click="closeView">
          {{ $t('components.WkExport.f5b04a832537eda86fdc03ff2527303a') }}
        </el-button>
        <el-button @click="closeView">
          {{ $t('components.WkExport.90f128e3ddca1aab08097219a509bb4c') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloadExcelWithResData } from '@/utils'
import { isObject } from '@/utils/types'
import merge from '@/utils/merge'

export default {
  name: 'WkExport',
  data() {
    return {
      loading: false,
      showCRMExport: false,
      config: {},
      exportType: '',
      rangeType: 'table', // table 列表字段 all 全部字段
      rangeTypeOptions: [{
        value: 'all',
        label: '全部字段'
      }, {
        value: 'table',
        label: '列表字段'
      }],
      fieldList: [], // 字段数据
      selectionList: [], // 勾选字段数据
      fileType: 1, // 导出文件类型
      stepsActive: 1, // 步骤

      checkAll: false, // 选择所有状态
      isIndeterminate: false,
      isObjectMes: false, // 是对象消息 企业微信登录的导出会出现

      exportLoading: false // 正在导出中
    }
  },
  computed: {
    exportTypeName() {
      if (this.config && this.config.typeName) {
        return this.config.typeName
      }
      return {
        customer: this.$t('components.WkExport.d74fc0332cd42d6c27b9b9b344e19080'),
        leads: this.$t('components.WkExport.ea1e9b577780f5bc2e2fabc7101d6ae0'),
        contacts: this.$t('components.WkExport.5a3a3d74600fca337abc5430dbd4202a'),
        applet: this.$t('components.WkExport.a01db8b30b4115b6742ef7b842907dfd'),
        business: this.$t('components.WkExport.4a671c6fb9395b157740b9062abc80b1'),
        contract: this.$t('components.WkExport.f06d225b68a353e312f37ce7fd86db45'),
        receivables: this.$t('components.WkExport.bb6ddd8a33a2c5961e4ebbfa9462b34f'),
        product: this.$t('components.WkExport.7590a10bbec620ccc25688c0e1e69be9'),
        invoice: this.$t('components.WkExport.23a6b3dfb322aa209278995d17a860fe'),
        receivablesPlan: this.$t('components.WkExport.11d0a3f6bb638860d7fc7f31a9817905'),
        examine: '审批'
      }[this.exportType] || ''
    },

    doneTips() {
      if (this.isObjectMes) {
        return this.$t('components.WkExport.58fc34573a83d8e2efc0c8ebb99edf28')
      }
      return this.$t('components.WkExport.344ca1dbe1d51ef972b1d732a166a4ca')
    }
  },
  methods: {
    /**
     * 展示导出弹窗
     */
    export(exportType, props) {
      this.exportType = exportType
      /**
       * typeName 标题
       * params 确定传参
       * request 确定请求
       * fieldRequest 字段请求
       * fieldParams 字段参数
       * allFieldRequest 全部字段请求
       * allFieldParams 全部字段参数
       * idKey 默认id
       * selectsKey sortIds  用于提交最终选择 idKey 值的key
       * rangeSelectShow: false  范围选择展示 默认false
       */
      this.config = merge({ idKey: 'id', selectsKey: 'sortIds', rangeSelectShow: false }, props || {})
      this.showCRMExport = true
      this.getFieldList()
    },
    /**
     * 确认导出
     */
    sureClick() {
      if (this.selectionList.length == 0) {
        this.$message.error(this.$t('components.WkExport.783f9f3e36e27a06644a2212c7b40250'))
        return
      }
      this.exportLoading = true
      const params = {
        isXls: this.fileType,
        ... this.config.params
      }

      this.isObjectMes = false // 重置标识

      if (this.exportType === 'examine') {
        const data = []
        this.fieldList.forEach(item => {
          this.selectionList.forEach((sItem, sIndex) => {
            if (item.sortId == sItem) {
              data.push({
                name: item.label,
                fieldKey: item.sortId,
                sort: sIndex
              })
            }
          })
        })

        params['fieldList'] = data
      } else {
        params[this.config.selectsKey] = this.selectionList
      }

      this.config.request(params)
        .then(res => {
          if (res.data instanceof Blob) {
            downloadExcelWithResData(res)
            this.exportLoading = false
            this.stepsActive = 2
          } else if (isObject(res)) {
            if (res.code === 0) {
              this.isObjectMes = true
              this.stepsActive = 2
              this.exportLoading = false
            }
          }
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    /**
     * 获取导出字段
     */
    getFieldList() {
      this.loading = true
      let params = {}
      let request = null

      if (this.rangeType === 'table') {
        if (this.config.fieldParams) {
          params = this.config.fieldParams
        }
        request = this.config.fieldRequest
      } else {
        if (this.config.allFieldParams) {
          params = this.config.allFieldParams
        }
        request = this.config.allFieldRequest
      }

      request(params)
        .then(res => {
          res.data = res.data.filter(o => {
            if (!o.hasOwnProperty('formType')) return true
            return o.formType &&
              ![
                'handwriting_sign',
                'desc_text'
              ].includes(o.formType)
          })
          const fieldList = []
          const selectionList = []

          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index]
            var width = 0
            if (!element.width) {
              if (element.name && element.name.length <= 6) {
                width = element.name.length * 15 + 45
              } else {
                width = 140
              }
            } else {
              width = element.width
            }
            fieldList.push({
              prop: element.fieldName,
              formType: element.formType,
              label: element.name,
              width: width,
              sortId: element[this.config.idKey]
            })

            selectionList.push(element[this.config.idKey])
          }
          // 审批导出特殊处理
          if (this.config.hasOwnProperty('fieldList')) {
            fieldList.push(...this.config.fieldList)
            selectionList.push(...this.config.selectionList)
          }

          this.fieldList = fieldList
          this.selectionList = selectionList
          this.checkAll = true
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 选中数据
     */
    handleSelectionChange(val) {
      this.selectionList = val
    },
    // 关闭操作
    closeView() {
      if (this.exportLoading) { // 正在导出 禁止关闭
        return
      }
      this.showCRMExport = false
      this.stepsActive = 1
      this.selectionList = []
    },
    /**
     * 选中所有
     */
    handleCheckAllChange(val) {
      this.selectionList = val ? this.fieldList.map(item => item.sortId) : []
      this.isIndeterminate = false
    },
    /**
     * 选择
     */
    handleChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.fieldList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
    }
  }
}
</script>

<style lang="scss" scoped>
.el-steps {
  margin-bottom: 16px;
}

.type-section + .field {
  margin-top: 16px;
}

.field + .type-section {
  margin-top: 16px;
}

.type-section {
  font-size: 14px;

  &__header {
    margin-bottom: 8px;
    font-weight: bold;
  }
}

.step-section {
  min-height: 300px;

  .field {
    height: 100%;
    padding: 12px;
    background-color: $--color-n10;
    border-radius: $--border-radius-base;

    .field-list {
      flex: 1;
      margin-top: 8px;
      overflow-y: auto;
    }

    .select-num {
      margin-top: 8px;
      color: $--color-text-secondary;
    }
  }

  &.is-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .success {
    font-weight: 600;
    color: $--color-text-primary;

    img {
      width: 50px;
      height: 50px;
      margin-bottom: 8px;
    }
  }
}

.dialog-footer {
  text-align: right;
}

::v-deep .el-checkbox {
  margin-right: 20px;
  margin-bottom: 8px;
}

::v-deep .el-loading-spinner {
  top: 45%;

  .el-icon-loading {
    font-size: 40px;
    color: $--color-primary;
  }

  .el-loading-text {
    margin: 8px 0;
    color: $--color-primary;
  }
}
</style>
